<template>
  <div class="i18n-input">
    <svg-icon style="font-size: 22px;color: #888;cursor: pointer;" icon-class="language"  @click.stop="openInputPopup" />
    <el-dialog :visible.sync="open" width="500px" :close-on-click-modal="false" append-to-body>
      <el-form  ref="form" :model="form" label-width="80px">
        <el-form-item :label="item.name+':'" v-for="(item) in countryList" :key="item.language">
          <el-input v-model="form[item.language]" style="width: 100%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {options} from '@/api/system/country';
import {addLanguage,listLanguage} from '@/api/system/language';
export default{
  props:{
    objId:'' ,
    type:'' , 
    property:'',
  },
  data(){
    return{
      open:false,
      form:{},
      countryList:[],
    }
  },
  created(){
   this.getCountryList();
  },
  methods:{
    getCountryList(){
      options().then( res => {
        this.countryList = res.data;
        this.reset();
      })
    },
    getLanguageList(){
      listLanguage({type:this.type , property:this.property,objId:this.objId}).then(res => {
        let languageList = res.data ;
        if(languageList && languageList.length > 0){
          for(var i = 0; i < languageList.length ; i++){
            let languageObj = languageList[i];
            this.$set(this.form,languageObj.language, languageObj.title)
          }
        }
      })
    },
    reset() {
      this.form = {};
      this.countryList.forEach(el=>{
        this.$set(this.form,el.language,'')
      })
      this.resetForm("form");
    },
    openInputPopup(){
      this.reset();
      if(this.objId){
        this.getLanguageList();
      }
      this.open = true;
    },
    cancel(){
      this.open = false;
    },
    submitForm(){
      let param = []
      let _form = this.form;
      for (var language in _form) {
        if(_form[language]) param.push({'language':language , type : this.type , property : this.property , title:_form[language] , objId : this.objId})
      }
      addLanguage(param,this.type , this.property,this.objId).then(res => {
        this.$modal.msgSuccess("操作成功!");
        this.open = false;
      })
    }
  },
}
</script>

<style scoped lang="scss" >
  .i18n-input{
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }
</style>